<script setup>
import { onMounted } from 'vue'
import { NButton, NForm, NFormItem, NInput, NSelect, NTag, useMessage } from 'naive-ui'
import api from '@/api'
import { getToken, renderIcon } from '@/utils'
import TheIcon from '@/components/icon/TheIcon.vue'
import { useCRUD } from '@/composables'

const base_path = import.meta.env.VITE_BASE
const message = useMessage()
const {
  modalVisible,
  modalAction,
  modalTitle,
  modalLoading,
  handleAdd,
  handleDelete,
  handleEdit,
  handleSave,
  modalForm,
  modalFormRef,
} = useCRUD({
  name: '用药管理',
  initForm: {},
  doCreate: api.createCustomerSign,
  doDelete: api.deleteCustomerSign,
  doUpdate: api.updateCustomerSign,
  refresh: () => on_ref(),
})

function get_config() {
  api.getUserList({
    type: 2
  }).then((res) => {
    data.doctors = res.data
  })
  api.getUserList({
    type: 3
  }).then((res) => {
    data.advisers = res.data
  })
  api.getProjectsAllTree().then((res) => (data.projects = res.data))
  api.getSigns().then((res) => {
    data.signs = res.data[res.data.length - 1];
  })
}


const props = defineProps({
  infoData: {
    type: Object,
    required: true
  }
});
const data = reactive({
  sign_list: [],
  card_loading: false,
  select_customer: {
    name: "未选择",
    card_number: "--",
    user_level_name: "--",
    mobile: "--",
    bi_date: "--",
    sex: "--",
    hkqd: "--",
    age: "--",
    created_at: "--",
    last_come: "--",
    record_hobby: [],
    totals: {
      weimei: 0,
      cdp: 0,
      fujia: 0,
      other: 0,
      buy_money: 0,
      cases: 0,
      appoint_count: 0,
      return_count: 0,
      operation_count: 0,
      face_count: 0,
      test_count: 0,
      having_customers: 0,
      customers_level5: 0

    }
  },
  tab_goods: [],
  meeting_users: [],
  config: [],
  uploadAction: base_path + '/system/base/userimg',
  token: getToken(),
  keyword: "",
  medicine_show: false,
  medicine_form: {},
  signs:[]
});

onMounted(() => {
  data.select_customer = props.infoData
  on_ref()
  get_config()
})


function on_ref() {
  get_sign_list()
}

function get_sign_list() {
  data.card_loading = true
  api.getCustomerSigns({
    user_id: data.select_customer.user_id,
  }).then((res) => {
    data.sign_list = res.data
    data.card_loading = false
    data.loading = false
  })
}


function search_order() {
  data.loading = true
  get_order_list()
}

function on_save() {
  modalForm.value.user_id = data.select_customer.id
  modalForm.value.sign_id = 1
  handleSave()
}

const onCreate_info = () => {
  return {
    name: '',
    num: 1,
    desc: ''
  }
}

</script>
<template>
  <div class="container" style="height: calc(100vh - 106px);">
    <div class="search">
      <NInput size="large" @change="search_order" v-model:value="data.keyword" :loading="data.loading" clearable
              type="text" placeholder="请输入项目名称检索"/>
    </div>
    <n-spin :show="data.card_loading" style="--n-opacity-spinning:0.1;height: calc(100vh - 225px);">
      <n-scrollbar v-if="data.sign_list.length>0" style="max-height: calc(100vh - 180px);padding:0 20px 20px 0px">
        <n-collapse class="cards" accordion :default-expanded-names="[data.sign_list[0].id]">
          <n-collapse-item :name="item.id" v-for="item in data.sign_list" class="card">
          <template #header>
            <div style="display: flex; align-items: center;justify-content: flex-start">
              <n-h6 prefix="bar" type="info" style="margin: 0;font-size: 16px">
                <div style="display: flex">
                  <div style="height:40px;line-height:20px;margin-left: 10px">
                    <span style="margin-right: 5px">
                      {{item.sign.name}}
                    </span>
                    <br>
                    <span style="font-size: 12px;color:#747586">{{ item.created_at }}</span>
                  </div>
                </div>
              </n-h6>
            </div>
          </template>

          <div class="project_list">
            <n-card size="small" :bordered="false" hoverable content-style="padding: 20px;"
                    :segmented="{content: true,footer: 'soft',}">
              <template v-for="(question, index) in JSON.parse(item.sign.info).questions">
                <n-h6 prefix="bar" style="margin: 0;font-size: 14px">{{ question.title }}</n-h6>
                <n-tag v-if="item.answer" style="margin: 10px" type="success">{{ JSON.parse(item.answer.info)[index] }}</n-tag>
                <n-divider style="margin-top: 10px" v-if="index < JSON.parse(item.sign.info).questions.length - 1" />
              </template>
            </n-card>
          </div>
        </n-collapse-item>
        </n-collapse>
      </n-scrollbar>
      <n-empty v-else description="暂无数据" style="margin: 50px"></n-empty>
    </n-spin>

    <n-float-button :right="10" :bottom="10" shape="square" @click="handleAdd" type="primary">
      <component :is="renderIcon('material-symbols-light:add', { size: 25,color:'#fff' })"/>
    </n-float-button>

  </div>


  <n-drawer v-model:show="modalVisible" width="680px">
    <n-drawer-content title="发放知情同意书" closable>
      <NForm
          ref="modalFormRef"
          label-placement="left"
          label-align="left"
          :label-width="100"
          :model="modalForm"
      >
        <NFormItem label="咨询项目" path="project_id">
            <n-cascader style="width: 300px;" v-model:value="modalForm.project_id"
              clearable
              placeholder="请选择项目"
              :options="data.projects"
              cascade
              check-strategy="children"
              show-path
              filterable
              multiple
              clear-filter-after-select
              label-field="name"
              value-field="id"
            />
        </NFormItem>
        <NFormItem label="诊疗医生" path="doctor_id">
          <NSelect
              v-model:value="modalForm.doctor_id"
              :options="data.doctors"
              placeholder="选择医生"
              filterable
              multiple
              label-field="name"
              value-field="id"
              style="width: 100%"
          />
        </NFormItem>

      </NForm>
      <template #footer>
        <n-button type="primary"  @click="on_save"><TheIcon icon="material-symbols:database-upload-outline" :size="16" class="mr-5" />保存</n-button>
      </template>

    </n-drawer-content>


  </n-drawer>


</template>


<style>
.container {
  padding: 10px;
  //transform: translate(0);
  position: relative;
  height: 100%;

  .search {
    margin-bottom: 10px;
  }
}

.cards {
  margin: 0px;
}

.project {
  margin-bottom: 10px;
}

.project_list {
  background: #f3f3f3;
  padding: 20px;
  border-radius: 5px;
}

.add_cases {
  height: 60px;
  position: absolute;
  bottom: 0;
  background: #eee;
  width: 100%;
  padding: 10px;
  border-top-left-radius: 5px;
}

</style>